import React, { memo, useEffect } from "react";
import { useSelector, shallowEqual, useDispatch } from "react-redux";

import { VideoBtnStyle } from "./style";
import {
  mvDetailAction,
  mvDetailInfoAction,
} from "../../../pages/mv/store/actionTypes";
import {
  videoDetailAction,
  videoDetailInfoAction,
} from "../../../pages/video/store/actionTypes";

export default memo(function VideoBtn(props) {
  const dispatch = useDispatch();

  useEffect(() => {
    if (!props.video) {
      dispatch(mvDetailAction(props.mvid));
      dispatch(mvDetailInfoAction(props.mvid));
    } else {
      dispatch(videoDetailAction(props.mvid));
      dispatch(videoDetailInfoAction(props.mvid));
    }
  }, [dispatch, props.mvid, props.video]);

  const { mvDetailState, mvDetailInfo } = useSelector(
    (state) => ({
      mvDetailState: !props.video
        ? state.getIn(["mv", "mvDetailR"])
        : state.getIn(["video", "videoDetail"]),
      mvDetailInfo: !props.video
        ? state.getIn(["mv", "mvDetailInfoR"])
        : state.getIn(["video", "videoDetailInfo"]),
    }),
    shallowEqual
  );

  return (
    <VideoBtnStyle>
      <div className="v-ob">
        <a className="addplaylist u-btn button2">
          <i className="dz-i u-btn-i button2">
            <em className="dz button2"></em>
            <span>({mvDetailInfo.likedCount})</span>
          </i>
        </a>
        <a className="addplaylist u-btn button2">
          <i className="addicon u-btn-i button2">
            <span>
              (
              {mvDetailState.length !== 0
                ? !props.video
                  ? mvDetailState.data.subCount
                  : mvDetailState.data.subscribeCount
                : ""}
              )
            </span>
          </i>
        </a>
        <a className="u-btn button2">
          <i className="zf u-btn-i button2">
            <span>({mvDetailInfo.shareCount})</span>
          </i>
        </a>
      </div>
    </VideoBtnStyle>
  );
});
